<template>
    <nav class="controller">
        <button v-if="option.arrowsType" class="prev-btn" :class="{moving:option.arrowsType === 'animate'}" @click="changePage(prevIndex)"></button>
        <ul v-if="option.navbar">
            <li v-for="index in pageNum" @click="changePage(index)" :class="{current:option.highlight && index === currentPage}" :key="'controller-'+index" :data-index="index" class="controller-item"></li>
        </ul>
        <button v-if="option.arrowsType" class="next-btn" :class="{moving:option.arrowsType === 'animate'}" @click="changePage(nextIndex)"></button>
    </nav>
</template>

<script>
export default {
  name: 'page-controller',
  props: {
    pageNum: Number,
    currentPage: Number,
    option: {
      type: Object,
      default: {
        arrowsType: 'animate',
        navbar: true,
        highlight: true,
        loop: true        //是否开启滚动循环
      }
    }
  },
  methods: {
    changePage (index) {
      this.$emit('changePage', index);
    }
  },
  computed: {
    nextIndex () {
      if (this.currentPage === this.pageNum) {
        if(this.option.loop){
            return 1
          }else{
            return this.pageNum
          }
      } else {
        return this.currentPage + 1;
      }
    },
    prevIndex () {
      if (this.currentPage === 1) {
        if(this.option.loop){
            return this.pageNum
          }else{
            return 1
          }
      } else {
        return this.currentPage - 1;
      }
    }
  },
  created () {
    if (this.option.navbar === undefined) {
      this.option.navbar = true;
    }
  },
  mounted () {
    let _this = this;
    let timer = null;
    let start = 0;
    // 滚轮处理
    function scrollHandler (direction) {
      // 防止重复触发滚动事件
      if (timer != null) {
        return;
      }
      if (direction === 'down') {
        _this.changePage(_this.nextIndex);
      } else {
        _this.changePage(_this.prevIndex);
      }
      timer = setTimeout(function() {
        clearTimeout(timer);
        timer = null;
      }, 300);
    }
    // if (Object.hasOwnProperty.call(window,'onmousewheel')) {
    if (Object.hasOwnProperty.call(window,'onmousewheel')) {
      // 监听滚轮事件
      window.addEventListener('mousewheel',function (event) {   // IE/Opera/Chrome
        let direction = event.wheelDelta > 0 ? 'up':'down';
        scrollHandler(direction);
      },false);
    } else {
      window.addEventListener('DOMMouseScroll',function (event) {   // Firefox
        let direction = event.detail > 0 ? 'up':'down';
        scrollHandler(direction);
      },false);
    }
    // 移动端触摸事件处理
    window.addEventListener('touchstart', function (event) {
      start = event.touches[0].clientY;
    })
    window.addEventListener('touchmove', function (event) {
      event.preventDefault();
    })
    window.addEventListener('touchend', function (event) {
      let spacing = event.changedTouches[0].clientY - start;
      let direction;      
      if (spacing > 50) {
        direction = 'up';
        scrollHandler(direction);
      } else if (spacing < -50) {
        direction = 'down';
        scrollHandler(direction);
      }
    })
  }
}
</script>
